import React, { Component } from 'react'

import LinkButton from '../../components/link-button'
import { Card, Table, Button, Modal, message, notification } from 'antd'
import { formateDate } from '../../utils/dateUtils'

import { reqBossTrigger, reqStartTesk, reqSearchQuery } from '../../api'
import SearchForm from './search-form'
import './index.less'

export default class Bar extends Component {
  state = {
    loading: false,
    isShow: false,
    data: []
  }

  UNSAFE_componentWillMount() {
    this.initColumns()
  }

  componentDidMount() {
    this.getTaskList()
  }

  initColumns = () => {
    this.columns = [
      {
        title: '职位名称',
        dataIndex: 'jobTitle',
        width: 160
      },
      {
        title: '筛选条件',
        children: [
          {
            title: '经验',
            dataIndex: 'jobTime',
            width: 180,
            render: (jobTime) => (
              <span>{jobTime.join(',')}</span>
            )
          },
          {
            title: '学历',
            dataIndex: 'degree',
            width: 180,
            render: (degree) => (
              <span>{degree.join(',')}</span>
            )
          },
          {
            title: '薪资',
            dataIndex: 'salary',
            width: 120,
            render: (salary) => (
              <span>{salary.join(',')}</span>
            )
          },
          {
            title: '求职意向',
            dataIndex: 'intention',
            width: 200,
            render: (intention) => (
              <span>{intention.join(',')}</span>
            )
          }
        ]
      },
      {
        title: '创建时间',
        dataIndex: 'createtime',
        width: 180,
        render: (createtime) => (
          <span>{formateDate(createtime)}</span>
        )
      },
      {
        title: '操作',
        key: 'operation',
        width: 120,
        fixed: 'right',
        render: (record) => (
          <LinkButton onClick={() => this.startClick(record)}>启动</LinkButton>
        )
      }
    ];
  }

  getTaskList = async () => {
    this.setState({loading: true})
    const result = await reqSearchQuery()
    this.setState({ loading: false })
    if(result.code === 200) {
      this.setState({data: result.data})
    }
  }

  startClick = async (record) => {

    let copy = {...record}
    delete copy.createtime
    delete copy.handleTime
    delete copy.uuid
    delete copy.status

    copy.jobTitle = 'Java'

    notification.success({
      message: <span>任务进行中。。。</span>,
        top: 60,
        duration: 3
    })
    const result = await reqStartTesk(copy)
  }

  handleCancel = () => {
    this.form.resetFields()
    this.setState({ isShow: false })
  }

  searchResume = () => {
    this.form.validateFields( async (err, values) => {
      if(!err) {
        // 隐藏确认框
        this.setState({
          isShow: false
        })

        delete values.startTime
        delete values.endTime
        values.salary=[values.salary]

        this.v = values 

        values.handleTime = '21:00-23:00'
        // this.form.resetFields()

        const result2 = await reqBossTrigger(values)
        if(result2.code === 200) {
          message.success(result2.msg)
        }
        this.getTaskList()
      }
    })
  
  }

  render() {
    const { isShow, loading, data } = this.state
    const extra = (
      <Button type="primary" onClick={() => this.setState({ isShow: true })}>搜索简历</Button>
    )
    return (
      <Card extra={extra}>
        <Table
          bordered
          rowKey="uuid"
          loading={loading}
          dataSource={data}
          columns={this.columns}
          scroll={{ x: 'calc(700px + 50%)'}}
        />

        <Modal
          title="搜索条件"
          visible={isShow}
          onOk={this.searchResume}
          onCancel={this.handleCancel}
        >
          <SearchForm 
            setForm = {(form) => {this.form = form}} 
          />
        </Modal>
      </Card>
    )
  }
}
